<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>${fns:getConfig('productName')} 登录</title>

	<!-- Favicon
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
	<link rel="icon" href="/favicon.ico" type="image/x-icon"> -->

	<!-- Bootstrap Core CSS -->
	<link href="${ctxStatic}/css/bootstrap.css" rel="stylesheet">

	<!-- MetisMenu CSS -->
	<link href="${ctxStatic}/css/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">

	<!-- Custom CSS -->
	<link href="${ctxStatic}/css/smartech.css" rel="stylesheet">

	<!-- Custom Fonts -->
	<link href="${ctxStatic}/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

	<!-- Animate CSS -->
	<link href="${ctxStatic}/css/animate.css" rel="stylesheet">

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
	<style type="text/css">
		body{background-color: #EEEEEE!important;}
		#page-wrapper {position: inherit; margin: 0 0 0 80px!important;border-left:none;padding: 10px 30px;min-height: 530px!important;}
		.text-xs { font-size: 10px;display: inline-block;float: right; margin:0px;}
		.text-muted{padding-left:0;}
		.bs-docs-footer {color: #595656; text-align: center;}
		.bs-docs-footer-links li {display: inline;padding: 0 20px; font-size: 18px;}
		.bs-docs-footer-links li:nth-child(2) a{border-left: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC;  padding: 0 45px;    display: inline-block;height: 15px;line-height: 12px;}
		.bs-docs-footer-links li a{ color:#595656; font-size:16px;}
		.alert{line-height: 14px;padding: 0px;margin-bottom:0px;margin-top: -26px;}
		.alert .alert-error{margin:0 15px;}
		.error{ margin: 10px 0px;}
		label.error{margin-left:0px!important;}
		.radio, .checkbox{  margin-top:0px;    margin-bottom: 15px;}
	</style>
</head>

<body>
<!--[if lte IE 6]><br/>
<div class='alert alert-block' style="text-align:left;padding-bottom:10px;">
	<a class="close" data-dismiss="alert">x</a><h4>温馨提示：</h4>
	<p>你使用的浏览器版本过低。为了获得更好的浏览体验，我们强烈建议您
		<a href="http://browsehappy.com" target="_blank">升级</a> 到最新版本的IE浏览器，或者使用较新版本的 Chrome、Firefox、Safari 等。
	</p>
</div><![endif]-->

<div class="container">
	<div id="page-wrapper">
		<div class="row margin-bottom ">
			<a class="navbar-brand" href="index.html"><img src="${ctxStatic}/img/yunac2.png" alt="kunteng"></a>
		</div>
		<div class="row">
			<div class="col-md-7 margin-top">
				<img src="${ctxStatic}/img/login.png">
			</div>
			<div class="col-md-4">

				<div class="login-panel panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">欢迎登录</h3>
					</div>
					<div class="panel-body">
						<form  class="" id="loginForm" role="form" action="${ctx}/login" method="post">
							<fieldset>
								<div class="input-group margin-bottom">
									<span class="input-group-addon"><img src="${ctxStatic}/img/云ac登录页－1－2_10.png"></span>
									<input type="text" id="username" value="${username}" name="username" class="form-control required" placeholder="邮箱/电话" >
								</div>
								<!-- <div class="form-group">
                                    <input class="form-control" placeholder="Password" name="password" type="password" value="">
                                </div> -->
								<div class="input-group margin-bottom">
									<span class="input-group-addon"><img src="${ctxStatic}/img/云ac登录页－1－2_00.png"></span>
									<input type="password" id="password" name="password" class="form-control"  placeholder="密码">
								</div>
								<div class="header">
									<div id="messageBox" class="alert alert-error ${empty message ? 'hide' : ''}">
										<%--<button data-dismiss="alert" class="close">×</button>--%>
										<label id="loginError" class="error">${message}</label>
									</div>
								</div>
								<c:if test="${isValidateCodeLogin}">
									<div class="row " style="margin-bottom:8px">
											<%--<button class=" btn ">验证码</button>--%>
										<sys:validateCode name="validateCode" inputCssStyle="margin-bottom:0;"/>
									</div>
								</c:if>
								<div class="checkbox">
									<label>
										<input type="checkbox"id="rememberMe" name="rememberMe" ${rememberMe ? 'checked' : ''}>记住密码
									</label>
								</div>
								<!-- Change this to a button or input when using this as a form -->
								<input type="submit" class="btn btn-lg btn-danger btn-block" value="登 录">
							</fieldset>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<footer class="bs-docs-footer  margin-top " role="contentinfo">
	<div class="container">

		<ul class="bs-docs-footer-links text-muted">
			<li><a href="http://expo.bootcss.com">服务市场</a></li>

			<li><a href="http://blog.getbootstrap.com">开放平台</a></li>

			<li><a href="https://github.com/twbs/bootstrap/issues">坤腾主页</a></li>
		</ul>
	</div>

	<div class="text-center footer">&copy; 2015北京坤腾畅联科技有限公司  版权所有</div>
</footer>


<!-- jQuery Version 1.11.0 -->
<script src="${ctxStatic}/js/jquery-1.11.0.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="${ctxStatic}/js/bootstrap.min.js"></script>

<link href="${ctxStatic}/jquery-validation/1.11.0/jquery.validate.min.css" type="text/css" rel="stylesheet" />
<script src="${ctxStatic}/jquery-validation/1.11.0/jquery.validate.min.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		$("#loginForm").validate({
			rules: {
				validateCode: {remote: "${pageContext.request.contextPath}/servlet/validateCodeServlet"}
			},
			messages: {
				username: {required: "请填写用户名."},password: {required: "请填写密码."},
				validateCode: {remote: "验证码不正确.", required: "请填写验证码."}
			},
			errorLabelContainer: "#messageBox",
			errorPlacement: function(error, element) {
				error.appendTo($("#loginError").parent());
			}
		});
	});
</script>
</div>
</body>

</html>
